// <!-- 展示模板 -->
var template = `
<div>
    <div class="nav">
        <h1 class="title">{{appName}}!</h1>
        <p class="menu">
            <!--使用 router-link 组件进行导航 -->
            <!--通过传递 \`to\` 来指定链接 -->
            <!--\`<router-link>\` 将呈现一个带有正确 \`href\` 属性的 \`<a>\` 标签-->
            <router-link to="/">任务管理</router-link>
            <router-link to="/proxy">代理配置</router-link>
            <router-link to="/user">用户配置</router-link>
            <router-link to="/config">系统配置</router-link>
            <router-link to="/notify-email">通知邮箱</router-link>
        </p>
    </div>
    
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
    <!-- <a href="https://www.jianshu.com/p/b0c16bab3388">vue3使用is和v-is</a> -->
    <div v-is="'style'" scoped>
    </div>
    <Css></Css>
    <HeartBeat></HeartBeat>
</div>
`;
// <!-- Vue 代码 -->


let App = {
    name: 'App',
    data: () => {
        return {
            sharedState: store.state,
            appName: 'Instagram Crawler Admin',
            book: 'book1'
        }
    },
    components: {
        Css, HeartBeat
    },
    template: template,
    mounted: () => {
        const {proxy} = Vue.getCurrentInstance();
        console.log('%s mounted', proxy.$options.name);
        proxy.initApiDocs();
    },
    methods: {
        initApiDocs() {
            api.swagger.apiDocs().then(res => {
                if (res.status === 200 && res.data && res.data.components) {
                    this.sharedState.apiDocs = res.data;
                    console.log('load apiDocs', this.sharedState.apiDocs);
                }
            }).catch(e => {
                console.log('load apiDocs error', e)
            });
        }
    }
};
